<template>
	<div class="app-container">
		<el-button class="lgm-reset-btn" @click="goBack">返回</el-button>
		<div class="content">
			<div class="lgm-search">
				<el-form ref="form" :model="searchParams" label-width="80px" class="search-form">

					<el-form-item label="裁床日期">
						<el-date-picker v-model="searchParams.time1" type="daterange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="交货日期">
						<el-date-picker v-model="searchParams.time2" type="daterange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>


					<el-row style="display: flex; height: 40px">
						<el-button type="success" class="lgm-search-btn" icon="el-icon-search"
							@click="seach">搜索</el-button>
						<el-button class="lgm-reset-btn" icon="el-icon-refresh" @click="reset">重置</el-button>

					</el-row>
				</el-form>
			</div>

			<div class="table">
				<div class="dis">
					<p>款式编号：<span>{{style_no}}</span></p>
					<p>总数：<span>{{numsAll}}</span></p>
				</div>
				<el-table :data="dataList" border>
					<el-table-column prop="color_name" label="颜色/尺码" align="center"></el-table-column>
					<el-table-column v-for="col in dynamicColumns" :key="col.prop" :prop="col.prop" :label="col.label"
						align="center"></el-table-column>
				</el-table>
			</div>
			<div class="table">
				<div class="dis">
					<p>床数：<span>{{bed_count}}</span></p>
					<p>总数：<span>{{numsAll2}}</span></p>
					<p>工价：<span>{{total_price}}</span></p>
					<p>裁床日期：<span>{{cutting_date}}</span></p>
				</div>
				<el-table :data="dataList2" border>
				    <el-table-column prop="color_name" label="颜色/尺码" align="center"></el-table-column>
				    <el-table-column v-for="col in dynamicColumns2" :key="col.prop" :prop="col.prop" :label="col.label" align="center"></el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		cutting_beddetail
	} from "@/api/admin";
	import DownloadExcel from "vue-json-excel";
	export default {
		data() {
			return {
				page: 1,
				page_size: 10,
				total: 0,
				searchParams: {
					cutting_bed_id: "",
					style_no: "",
					cutting_bed_id: "",
					type: "",
					time1: "",
					time2: "",
				},
				departmentList: [

				],
				dataList: [],
				dynamicColumns: [],
				dataList2: [],
				dynamicColumns2: [],
				style_no: "",
				bed_count: "",
				total_price: "",
				cutting_date: "",
				

			};
		},
		components: {
			"download-excel": DownloadExcel,
		},
		computed: {
			numsAll() {
				return this.dataList.reduce((total, item) => {
					return total + (item.M || 0) + (item.S || 0);
				}, 0);
			},
			numsAll2() {
				return this.dataList2.reduce((total, item) => {
					return total + (item.M || 0) + (item.S || 0);
				}, 0);
			}
		},
		mounted() {
			this.style_no = this.$route.query.style_no
			this.bed_count = this.$route.query.bed_count
			this.total_price = this.$route.query.total_price
			this.cutting_date = this.$route.query.cutting_date
			
			this.cutting_beddetailFn();
		},
		methods: {
			goBack(){
				 this.$router.go(-1);
			},
			formatDate(date) {
				const d = new Date(date);
				const year = d.getFullYear();
				const month = String(d.getMonth() + 1).padStart(2, "0"); // 月份从0开始
				const day = String(d.getDate()).padStart(2, "0");
				return `${year}-${month}-${day}`;
			},
			cutting_beddetailFn() {
				let obj = this.searchParams;
				obj['id'] = this.$route.query.id

				if (this.searchParams.time1) {
					obj["cutting_start_date"] = this.formatDate(this.searchParams.time1[0]);
					obj["cutting_end_date"] = this.formatDate(this.searchParams.time1[1]);
				}
				if (this.searchParams.time2) {
					obj["delivery_start_date"] = this.formatDate(this.searchParams.time2[0]);
					obj["delivery_end_date"] = this.formatDate(this.searchParams.time2[1]);
				}
				delete obj.time1
				delete obj.time2
				cutting_beddetail(obj).then((e) => {
					let static_style_list = e.data.static_style_list
					

					const dataList = [];
					// 用于动态生成列的映射
					const sizeMapping = {};

					// 遍历 color_size_info 对象
					for (const key in static_style_list.color_size_info) {
						const item = static_style_list.color_size_info[key];
						const existing = dataList.find(d => d.color_name === item.color_name);

						if (existing) {
							existing[item.size_name.toUpperCase()] = item.nums; // 将 M 或 S 作为键
						} else {
							// 创建新记录
							const newItem = {
								color_name: item.color_name,
								[item.size_name.toUpperCase()]: item.nums // 动态设置属性名
							};
							dataList.push(newItem);
						}

						// 记录所有尺码
						sizeMapping[item.size_name.toUpperCase()] = true;
					}

					// 生成动态列
					const dynamicColumns = Object.keys(sizeMapping).map(size => ({
						prop: size,
						label: size
					}));

					this.dataList = dataList;
					this.dynamicColumns = dynamicColumns;
					  let static_bed_list = e.data.static_bed_list;
					
					    const dataList2 = [];
					    const sizeMapping2 = {};
					
					    // 遍历 color_size_info 对象
					    for (const key in static_bed_list.color_size_info) {
					        const item = static_bed_list.color_size_info[key];
					        const existing = dataList2.find(d => d.color_name === item.color_name);
					
					        if (existing) {
					            existing[item.size_name.toUpperCase()] = item.nums; // 将 M 或 S 作为键
					            existing.numsAll = (existing.numsAll || 0) + item.nums; // 累加总数
					        } else {
					            // 创建新记录
					            const newItem = {
					                color_name: item.color_name,
					                [item.size_name.toUpperCase()]: item.nums, // 动态设置属性名
					                numsAll: item.nums // 初始化总数
					            };
					            dataList2.push(newItem);
					        }
					
					        // 记录所有尺码
					        sizeMapping2[item.size_name.toUpperCase()] = true;
					    }
					
					    // 生成动态列
					    const dynamicColumns2 = Object.keys(sizeMapping2).map(size => ({
					        prop: size,
					        label: size
					    }));
					
					    // 添加总数列
					    dynamicColumns2.push({
					        prop: 'numsAll',
					        label: '总数'
					    });
					
					    this.dataList2 = dataList2; // 处理后的数据
					    this.dynamicColumns2 = dynamicColumns2; // 动态列
				});
			},
			handleSizeChange(value) {
				this.page_size = value;
				this.cutting_beddetailFn();
			},
			handleCurrentChange(value) {
				this.page = value;
				this.cutting_beddetailFn();
			},
			reset() {
				for (let i in this.searchParams) {
					this.searchParams[i] = null;
				}
				this.seach()

			},
			seach() {
				this.cutting_beddetailFn();
			},
			clickItem() {
				console.log(456);
			},
			summary(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 1) {
						sums[index] = "合计";
						return;
					}
					const values = data.map((item) => Number(item[column.property]));
					if (!values.every((value) => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
					} else {
						sums[index] = "";
					}
				});

				return sums;
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "~@/styles/variables.scss";

	.app-container {
		.content {
			background-color: #fff;
			padding: 20px;
			border-radius: 5px;
		}

		.table {
			margin-bottom: 50px;
			.flex {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-around;

				::v-deep button {
					margin: 0;
					margin-bottom: 5px;
				}
			}
		}
	}

	.dis {
		display: flex;
		margin-bottom: 20px;

		p {
			margin-right: 20px;
			span{
				color: red;
			}
		}
	}
</style>